<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                Forms
            </h2>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i>  <a href="Javascript:void(0)" routerLink="/dashboard/home">Dashboard</a>
                </li>
                <li class="active">
                    <i class="fa fa-edit"></i> Forms
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->

    <div class="row">
        <div class="col-lg-6">

            <form role="form">
                <fieldset class="form-group">
                    <label>Text Input</label>
                    <input class="form-control">
                    <p class="help-block">Example block-level help text here.</p>
                </fieldset>

                <fieldset class="form-group">
                    <label>Text Input with Placeholder</label>
                    <input class="form-control" placeholder="Enter text">
                </fieldset>

                <div class="form-group">
                    <label>Static Control</label>
                    <p class="form-control-static">email@example.com</p>
                </div>

                <fieldset class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" class="form-control-file" id="exampleInputFile">
                </fieldset>

                <fieldset class="form-group">
                    <label>Text area</label>
                    <textarea class="form-control" rows="3"></textarea>
                </fieldset>

                <div class="form-group">
                    <label>Checkboxes</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value=""> Checkbox 1
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value=""> Checkbox 2
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value=""> Checkbox 3
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>Inline Checkboxes</label>
                    <label class="checkbox-inline">
                        <input type="checkbox">1
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox">2
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox">3
                    </label>
                </div>

                <fieldset class="form-group">
                    <label>Radio Buttons</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Radio 1
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Radio 2
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"> Radio 3
                        </label>
                    </div>
                </fieldset>

                <fieldset class="form-group">
                    <label>Inline Radio Buttons</label>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" value="option1" checked="">1
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2">2
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline3" value="option3">3
                    </label>
                </fieldset>

                <div class="form-group">
                    <label>Selects</label>
                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>

                <fieldset class="form-group">
                    <label>Multiple Selects</label>
                    <select multiple="" class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </fieldset>

                <button type="submit" class="btn btn-secondary">Submit Button</button>
                <button type="reset" class="btn btn-secondary">Reset Button</button>

            </form>

        </div>
        <div class="col-lg-6">
            <h4>Disabled Form States</h4>

            <form role="form">

                <fieldset disabled="">

                    <div class="form-group">
                        <label for="disabledSelect">Disabled input</label>
                        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled="">
                    </div>

                    <div class="form-group">
                        <label for="disabledSelect">Disabled select menu</label>
                        <select id="disabledSelect" class="form-control">
                            <option>Disabled select</option>
                        </select>
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Disabled Checkbox
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary">Disabled Button</button>

                </fieldset>

            </form>
            <br>

            <h4>Form Validation</h4>

            <form role="form">

                <div class="form-group has-success">
                    <label class="form-control-label" for="inputSuccess">Input with success</label>
                    <input type="text" class="form-control form-control-success" id="inputSuccess">
                </div>

                <div class="form-group has-warning">
                    <label class="form-control-label" for="inputWarning">Input with warning</label>
                    <input type="text" class="form-control form-control-warning" id="inputWarning">
                </div>

                <div class="form-group has-danger">
                    <label class="form-control-label" for="inputError">Input with danger</label>
                    <input type="text" class="form-control form-control-danger" id="inputError">
                </div>

            </form>

            <h4>Input Groups</h4>

            <form role="form">

                <div class="form-group input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>

                <div class="form-group input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-addon">.00</span>
                </div>

                <div class="form-group input-group">
                    <span class="input-group-addon"><i class="fa fa-eur"></i></span>
                    <input type="text" class="form-control" placeholder="Font Awesome Icon">
                </div>

                <div class="form-group input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control">
                    <span class="input-group-addon">.00</span>
                </div>

                <div class="form-group input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn"><button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button></span>
                </div>

            </form>

            <p>For complete documentation, please visit <a target="_blank" href="http://v4-alpha.getbootstrap.com/components/forms/">Bootstrap's Form Documentation</a>.</p>

        </div>
    </div>
    <!-- /.row -->

</div>